<template>
  <el-drawer
    v-model="dialogVisible"
    title="账单详情"
    width="600px"
    class="detail-draw"
  >
    <el-descriptions
      title=""
      :column="2"
      class="detail-information"
    >
      <el-descriptions-item label="用户名">{{
        detailData.userName
      }}</el-descriptions-item>
      <el-descriptions-item label="房间号">{{
        detailData.houseNum
      }}</el-descriptions-item>
      <el-descriptions-item label="账单费用"
        >{{ detailData.billFee || 0 }}元</el-descriptions-item
      >
      <el-descriptions-item label="账单时间">
        {{ detailData.billDate }}
      </el-descriptions-item>
    </el-descriptions>
    <div
      v-loading="loading"
      class="detail-collapse"
    >
      <div
        v-if="detailData.elecEquipBill"
        class="detail-collapse-item"
      >
        <div class="detail-collapse-title">
          <span>{{ detailData.elecEquipBill.name }}</span>
          <span>电费：{{ detailData.elecEquipBill.fee || 0 }}元</span>
        </div>
        <ul class="detail-fee-list">
          <li>
            <span>峰</span>
            <span>{{ detailData.elecEquipBill.monthElecPeak || 0 }}度</span>
            <span>{{ detailData.elecEquipBill.monthElecPeakFee }}元</span>
          </li>
          <li>
            <span>平</span>
            <span>{{ detailData.elecEquipBill.monthElecFlat || 0 }}度</span>
            <span>{{ detailData.elecEquipBill.monthElecFlatFee }}元</span>
          </li>
          <li>
            <span>谷</span>
            <span>{{ detailData.elecEquipBill.monthElecValley || 0 }}度</span>
            <span>{{ detailData.elecEquipBill.monthElecValleyFee }}元</span>
          </li>
          <li>
            <span>深谷</span>
            <span>{{ detailData.elecEquipBill.monthElecRavine || 0 }}度</span>
            <span>{{ detailData.elecEquipBill.monthElecRavineFee }}元</span>
          </li>
        </ul>
      </div>
      <div
        v-if="detailData.waterEquipBill"
        class="detail-collapse-item"
      >
        <div class="detail-collapse-title">
          <span>{{ detailData.waterEquipBill.name }}</span>
          <span>水费：{{ detailData.waterEquipBill.fee || 0 }}元</span>
        </div>
      </div>
      <div
        v-if="detailData.gasEquipBill"
        class="detail-collapse-item"
      >
        <div class="detail-collapse-title">
          <span>{{ detailData.gasEquipBill.name }}</span>
          <span>气费：{{ detailData.gasEquipBill.fee || 0 }}元</span>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script lang="ts" setup>
/**
 * 账单详情
 */
import { ref } from "vue";
import { getBillDetail } from "@/api/settle";

const dialogVisible = ref(false);
const loading = ref(false);
const billId = ref("");
const detailData = ref({});

const openHandle = (id: string) => {
  dialogVisible.value = true;
  if (billId.value !== id) {
    billId.value = id;
    getData();
  }
};

const getData = () => {
  loading.value = true;
  getBillDetail(billId.value)
    .then((res) => {
      detailData.value = res.data;
      loading.value = false;
    })
    .catch((err: any) => {
      detailData.value = {};
      loading.value = false;
    });
};

defineExpose({ dialogVisible, openHandle });
</script>
<style lang="scss" scoped>
$ligntColor: #838d9a;
$textColor: #303030;
$border: 1px solid #f0f0f0;
.detail-information {
  :deep(.el-descriptions__body) {
    .el-descriptions__label {
      color: $ligntColor;
    }
    .el-descriptions__content {
      font-weight: bold;
      font-size: 14px;
    }
  }
}

.detail-collapse {
  margin-top: 24px;
  .detail-collapse-item {
    margin-bottom: 32px;
  }

  .detail-collapse-title {
    display: flex;
    align-items: center;
    height: 48px;
    border-bottom: $border;
    color: $textColor;
    font-weight: bold;
    span:nth-child(1) {
      flex: 1;
      text-align: left;
      font-weight: 400;
    }
  }

  .detail-fee-list {
    padding: 0;
    margin: 0;
    li {
      display: flex;
      justify-content: space-between;
      height: 32px;
      line-height: 32px;
      padding-left: 16px;
      padding-right: 38px;
      margin-top: 4px;
      background: #f5f7fa;
      color: $textColor;
      span {
        width: 30%;
        text-align: right;
        &:first-child {
          width: 40px;
          text-align: left;
        }
        &:last-child {
          text-align: right;
        }
      }
    }
  }
}
</style>
